<template >
  <el-dialog v-model="dialogTableVisible" title="分配角色" @closed="dialogClose" @open="roleData">
    <el-select v-model="selectRole" placeholder="选择角色">
      <el-option v-for="item in options" :key="item.roleid" :label="item.roleName" :value="item.roleid"
        :disabled="item.disabled"></el-option>
    </el-select>
    <b>当前分配用户是
      <el-tag size:="large" type="success" class="mx-1" effect="dark" round>
        {{ roleNameStore.roleDesc }}
      </el-tag>

    </b>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消分配</el-button>
        <el-button type="primary" @click="handleAdd">
          确定分配
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
// 引入角色描述的store
import useRoleName from "@/store/roleName"
// 引入获取角色的接口
import useRole from "@/store/role"
// 引入判断是否是子节点的方法
import isChild from "@/utils/isChild"
// 引入用户的store
import useUser from "@/store/users"
// 引入分配角色的接口
import { assignmentRoleApi } from "@/api/role.js"
// 引入element-plus的message组件
import { ElMessage } from "element-plus"
// 使用用户的store
let userStore = useUser()
// 使用角色的store
let roleStore = useRole()
// 使用角色描述的store
let roleNameStore = useRoleName()
// 控制弹窗的显示与隐藏
let dialogTableVisible = ref(false)
// 定义组件将来点击确定和取消触发的方法
let emit = defineEmits(['reacquire', 'cancel', 'update:modelValue'])
// 声明选择角色的v-model的变量
let selectRole = ref()
// 定义组件以后接收的数据
let props = defineProps({
  // 弹框的显示与隐藏
  modelValue: {
    type: Boolean,
    default: false
  },
})
// 监听props的modelValue的变化
watch(() => props.modelValue, (newVal) => {
  // 判断props的modelValue的值是否和当前组件的dialogFormVisible的值一样,如果不一样,就同步
  if (newVal !== dialogTableVisible.value) {
    dialogTableVisible.value = newVal
  }
})
// 声明弹窗关闭触发的逻辑
let dialogClose = () => {
  options.value = []
  // console.log(roleNameStore.roleDesc) 
  // console.log(roleNameStore.unid);
  // 关闭弹窗
  dialogTableVisible.value = false
  // 触发父组件的更新数据
  emit('update:modelValue', dialogTableVisible.value)
}
// 分配的角色数据
const options = ref([])
// 声明弹窗打开触发的逻辑
let roleData = () => {
  // 调用roleStore中的方法 拉取角色信息
  roleStore.getAllRoles()
  // console.log(roleStore.allRoles);
  // 处理数据，对于没有权限分配的选项要添加disabled属性

  options.value = roleStore.allRoles.map(role => {
    // 为了不修改store中的数据，以免对其他的数据影响
    let roleObj = {}
    let currentRoleid = userStore.userInfo.value.roleid
    // 对比哪些角色是当前角色的子角色
    let flag = isChild(currentRoleid, role.roleid, roleStore.allRoles)
    // console.log(flag);
    roleObj = { ...role }
    if (!flag) {
      // 如果不是子角色，就添加disabled属性 禁用改选项
      roleObj.disabled = true
    }
    return roleObj
  })

}
// 点击确认分配的逻辑
const handleAdd = async () => {
  try{
    await assignmentRoleApi({unid:roleNameStore.unid,roleid:selectRole.value})
    // 触发父组件的方法重新获取列表数据
    emit('reacquire')
    ElMessage.success(`分配角色成功`)
  }catch(e){
    console.log(e);
  }

  dialogTableVisible.value = false
}



</script>